/**
 * props: {
 *  width: number
 *  height: number
 *  title: 移入文字
 *  disable: 布尔值，默认false, 为true时添加icon默认禁止色
 *  disableColor: 自定义禁止色
 *  active: 布尔值，默认false, 为true时添加icon默认禁止色
 *  activeColor: 自定义激活色
 *  hover: 布尔值，默认false,为true是添加 icon默认移入色
 *  hoverColor：自定义移入色
 *  color: icon的颜色
 *  svg: svg图片
 *  className: 样式类名
 *  onClick: 点击事件
 *  titleOffsetLeft/titleOffsetTop: 偏移
 * }
 * disable, hover,active 都不加，为图片本身的颜色
 */
import React, { PureComponent } from 'react'
import './style.less'

const defaultColor = {
  activeColor: '#558CFF',
  hoverColor: 'rgba(0,0,0,.2)',
  disableColor: '#558CFF'
}
export default class svgIcon extends PureComponent {
  static defaultProps = {
    className: '',
    path: '',
    titleOffsetLeft: 0,
    titleOffsetTop: 0
  }

  constructor(props) {
    super(props)
    this.state = {
      asyncSvg: ''
    }
    this.hover = true
    this.preColor = null
  }

  componentDidMount() {
    const { path } = this.props
    console.log(path, 'path')
    this.mounted = true
    if (path) {
      this.loadSvg(path)
    } else {
      this.loadSvgColor()
    }
  }

  componentDidUpdate(prevProps) {
    const { path, color } = this.props
    const { path: prevPath, color: preColor } = prevProps
    if (path && path !== prevPath) {
      this.loadSvg(path)
    }
    if (color && color !== preColor) {
      this.preColor = null
      this.loadSvgColor()
    }
  }

  componentWillUnmount() {
    this.mounted = false
  }

  loadSvg = (path) => {
    import(`@/assets/icon/${path}`).then((asyncSvg) => {
      if (this.mounted) {
        this.setState(
          {
            asyncSvg: asyncSvg.default
          },
          this.loadSvgColor
        )
      }
    })
  }

  loadSvgColor = () => {
    const { color, disable, active, activeColor, disableColor } = this.props
    if (disableColor) {
      this.setSvgColor(disableColor)
      return
    }
    if (activeColor) {
      this.setSvgColor(activeColor)
      return
    }
    if (disable) {
      this.setSvgColor(defaultColor.disableColor)
      return
    }
    if (active) {
      this.setSvgColor(defaultColor.activeColor)
      return
    }
    if (color) {
      this.setSvgColor(color)
    }
  }

  setSvgColor = (value) => {
    const SVG = this.el.querySelector('svg')
    const PATH = this.el.querySelector('svg path')
    const G = this.el.querySelector('svg g')
    const Polygon = this.el.querySelector('svg polygon')
    if (!SVG && !PATH && !G && !Polygon) {
      return
    }
    if (SVG) {
      SVG.setAttribute('fill', value)
    }
    if (PATH) {
      PATH.setAttribute('fill', value)
    }
    if (Polygon) {
      Polygon.setAttribute('fill', value)
    }
    if (G) {
      G.forEach((item) => {
        item.setAttribute('fill', value)
      })
    }
  }

  onClick = (e) => {
    const { onClick } = this.props
    this.clearIconClassName()
    if (onClick) {
      onClick(e)
    }
  }

  clearIconClassName = () => {
    const svgIconDom = document.getElementsByClassName('svgIconClassName')
    const length = svgIconDom.length
    for (let i = 0; i < length; i++) {
      document.body.removeChild(svgIconDom[i])
    }
  }

  onMouseHover = (e, mouseState) => {
    const { hoverColor, active, disable, hover, title } = this.props
    if (title) {
      this.setTitleHover(e, mouseState)
    }
    const SVG = this.el.querySelector('svg')
    const PATH = this.el.querySelector('svg path')
    if (!SVG && !PATH) {
      return
    }
    this.preColor = this.preColor || PATH.getAttribute('fill') || SVG.getAttribute('fill')
    if (active || disable) {
      return
    }
    if (hoverColor && this.hover) {
      this.setSvgColor(hoverColor)
      this.hover = false
      return
    }
    if (hoverColor && !this.hover) {
      this.setSvgColor(this.preColor)
      this.hover = true
      return
    }
    if (hover && this.hover) {
      this.setSvgColor(defaultColor.hoverColor)
      this.hover = false
      return
    }
    if (hoverColor && !this.hover) {
      this.setSvgColor(this.preColor)
      this.hover = true
    }
  }

  setTitleHover = (e, mouseState) => {
    const { title, titleOffsetLeft, titleOffsetTop } = this.props
    const rect = e.target.getBoundingClientRect()
    if (mouseState === 'onMouseEnter') {
      this.clearIconClassName()
      const left = `${rect.left + rect.width / 2 + titleOffsetLeft}px`
      const top = `${rect.top + rect.height + titleOffsetTop}px`
      const SvgCover = document.createElement('div')
      SvgCover.id = 'svgIcon'
      SvgCover.className = 'svgIconClassName'
      const t = document.createTextNode(title)
      SvgCover.appendChild(t)
      const style = {
        left,
        top
      }
      Object.keys(style).forEach((key) => {
        SvgCover.style[key] = style[key]
      })
      document.body.appendChild(SvgCover)
    } else {
      this.clearIconClassName()
    }
  }

  render() {
    const { svg, className, style, path, width, height, eventId = '' } = this.props
    console.log(svg, 'svg')
    const { asyncSvg } = this.state
    const param = {}
    if (width) {
      param.width = `${width}px`
    }
    if (height) {
      param.height = `${height}px`
    }
    return (
      <span
        ref={(el) => {
          this.el = el
        }}
        data-eventid={eventId}
        onClick={this.onClick}
        onMouseEnter={(e) => this.onMouseHover(e, 'onMouseEnter')}
        onMouseLeave={(e) => this.onMouseHover(e, 'onMouseLeave')}
        className={`svgIcon ${className}`}
        style={{ ...style, ...param }}
        dangerouslySetInnerHTML={{
          __html: path.includes('.svg') ? asyncSvg : svg
        }}
      />
    )
  }
}
